<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highsecondary" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>比价分析 -采方</title>
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    <style>
      [v-cloak] { display: none }
      div.q-field-vertical .q-field-label+.q-field-content { padding-top: 0!important }
    </style>
  </head>
  <body>
    <div id="q-rfxPurCompare" v-cloak>
      <q-layout>
        <q-page-container>
          <q-tabs inverted color="primary">
            <q-tab default slot="title" name="base" label="基本信息"></q-tab>

            <q-tab-pane name="base" class="q-pa-none">
              <q-card class="bg-white no-shadow full-width">
                <q-card-main class="q-px-md q-py-sm relative-position">
                  <div class="q-ml-md row gutter-x-sm">
                    <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                      询价主题：
                      <span class="text-light">{{ baseInfoForm.title }}</span>
                    </span>
                    <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                      询价单号：
                      <span class="text-light">{{ baseInfoForm.code }}</span>
                    </span>
                    <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                      采购组织：
                      <span class="text-light">{{ baseInfoForm.purOrgName }}</span>
                    </span>
                    <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                      采购组：
                      <span class="text-light">{{ baseInfoForm.purGroupName }}</span>
                    </span>
                    <span class="col-lg-4 col-md-6 col-sm-6 col-xs-12 q-mt-sm">
                      采购执行人：
                      <span class="text-light">{{ baseInfoForm.purExecutorName }}</span>
                    </span>
                  </div>
                  <q-inner-loading :visible="visible">
                    <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
                  </q-inner-loading>
                </q-card-main>
              </q-card>
            </q-tab-pane>
          </q-tabs>
          <q-tabs inverted color="primary">
            <q-tab default slot="title" name="details" label="分析列表"></q-tab>

            <q-tab-pane name="details" class="q-pa-none">
              <q-card class="bg-white no-shadow full-width">
                <q-card-main class="q-px-md q-py-sm relative-position">
                  <div class="row justify-start gutter-sm q-px-sm">
                    <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <q-input
                        float-label="物料编码"
                        v-model.trim="searchForm.matCode"></q-input>
                    </q-field>
                    <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <q-input
                        float-label="供应商编码"
                        v-model.trim="searchForm.supplierCode"></q-input>
                    </q-field>
                    <q-field class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <q-select
                        float-label="报价类型"
                        :options="typeOptions"
                        v-model="searchForm.type"></q-select>
                    </q-field>
                  </div>
                  <div class="row justify-end q-my-sm">
                    <q-btn
                      size="sm"
                      push
                      color="primary"
                      @click="search"
                      class="q-mt-sm q-mr-sm q-pa-sm">
                      <span slot="loading">
                        <q-spinner-hourglass></q-spinner-hourglass>
                        搜索中
                      </span>
                      <q-icon name="search"></q-icon>
                      <span>查询</span>
                    </q-btn>
                    <q-btn
                      size="sm"
                      push
                      color="secondary"
                      @click="reset"
                      class="q-mt-sm q-mr-sm q-pa-sm">
                      <span slot="loading">
                        <q-spinner-hourglass></q-spinner-hourglass>
                        重置中
                      </span>
                      <q-icon name="refresh" ></q-icon>
                      <span>重置</span>
                    </q-btn>
                  </div>
                  <q-table
                    class="no-shadow"
                    :data="tableData"
                    dense
                    hide-bottom
                    :columns="columns"
                    :rows-per-page-options="[5, 10, 20]"
                    selection="multiple"
                    :loading="listLoading"
                    :selected.sync="selected"
                    :pagination.sync="serverPagination"
                    row-key="id"
                  >
                    <template slot="body" slot-scope="props">
                      <q-tr
                        :props="props"
                      >
                        <q-td >
                          <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                        </q-td>
                        <q-td key="action" :props="props" >
                          <q-btn
                            flat
                            size="xs"
                            color="primary"
                            class="q-pa-xs"
                            @click="lookQuote(props.row.rfqItemId, props.row.headerId, props.row.rfqSupplierId, props.row.id)"
                          >
                            查看明细
                          </q-btn>
                          <q-btn 
                          	v-if="props.row.rfqItemEntity.pricingStatus != 1"
                            flat
                            size="xs"
                            color="primary"
                            class="q-pa-xs"
                            @click="reQuote(props.row.id)"
                          >
                            重新报价
                          </q-btn>
                        </q-td>
                        <q-td key="rfqItemEntity.matCode" :props="props" >
                          {{ props.row.rfqItemEntity.matCode }}
                        </q-td>
                        <q-td key="rfqItemEntity.matName" :props="props" >
                          {{ props.row.rfqItemEntity.matName }}
                        </q-td>
                        <q-td key="rfqItemEntity.quoteTempName" :props="props" >
                          {{ props.row.rfqItemEntity.quoteTempName }}
                        </q-td>
                        <q-td key="rfqSupplierEntity.supplierCode" :props="props" >
                          {{ props.row.rfqSupplierEntity.supplierCode }}
                        </q-td>
                        <q-td key="rfqSupplierEntity.supplierName" :props="props" >
                          {{ props.row.rfqSupplierEntity.supplierName }}
                        </q-td>
                        <q-td key="type" :props="props" >
                          <q-chip v-if="props.row.type == 1" dense square color="info">前期询价</q-chip>
                          <q-chip v-if="props.row.type == 2" dense square color="positive">正式报价</q-chip>
                        </q-td>
                        <q-td key="time" :props="props" >
                          {{ props.row.time }}
                        </q-td>
                        <q-td key="status" :props="props" >
                          <q-chip v-if="props.row.status == 1" dense square color="positive">已报价</q-chip>
                          <q-chip v-if="props.row.status == 0" dense square color="light">未报价</q-chip>
                          <q-chip v-if="props.row.status == -1" dense square color="info">报价中</q-chip>
                        </q-td>
                        <!-- <q-td key="productPrice" :props="props" >
                          {{ props.row.productPrice }}
                        </q-td> -->
                        <q-td key="productPrice" :props="props" >
                          {{ props.row.productPrice }}
                        </q-td>
                        <q-td key="rawMatPrice" :props="props" >
                          {{ props.row.rawMatPrice }}
                        </q-td>
                        <q-td key="outsourceMatPrice" :props="props" >
                          {{ props.row.outsourceMatPrice }}
                        </q-td>
                        <q-td key="processPrice" :props="props" >
                          {{ props.row.processPrice }}
                        </q-td>
                        <q-td key="erectionPrice" :props="props" >
                          {{ props.row.erectionPrice }}
                        </q-td>
                        <q-td key="nonProductPrice" :props="props" >
                          {{ props.row.nonProductPrice }}
                        </q-td>
                        <!-- <q-td key="nonProductPrice" :props="props" >
                          {{ props.row.nonProductPrice }}
                        </q-td>  
                        <q-td key="nonProductPrice" :props="props" >
                          {{ props.row.nonProductPrice }}
                        </q-td>
                        <q-td key="nonProductPrice" :props="props" >
                          {{ props.row.nonProductPrice }}
                        </q-td> -->
                        <q-td key="totalPrice" :props="props" >
                          {{ props.row.totalPrice }}
                        </q-td>
                        <!-- <q-td key="nonProductPrice" :props="props" >
                          {{ props.row.nonProductPrice }}
                        </q-td>   -->
                        <q-td key="rfqItemEntity.currencyName" :props="props" >
                          {{ props.row.rfqItemEntity.currencyName }}
                        </q-td>                 
                      </q-tr>
                    </template>
                  </q-table>
                  <div class="row justify-end items-center text-faded">
                    每页的行数：
                    <q-select 
                      :options="[{label: '5', value: 5},{label: '10', value: 10},{label: '20', value: 20}]" 
                      hide-underline
                      class="q-mr-md"
                      v-model="serverPagination.rowsPerPage"></q-select>
                    第
                    <q-pagination
                      class="q-mt-xs"
                      v-model="serverPagination.page"
                      input
                      boundary-links
                      direction-links
                      :max-pages="5"
                      :ellipses="true"
                      :max="pages"></q-pagination>
                    页 &nbsp; 共 {{ total }} 条
                  </div>
                  <q-inner-loading :visible="visible2">
                    <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
                  </q-inner-loading>
                </q-card-main>
              </q-card>
            </q-tab-pane>
          </q-tabs>
          <q-page-sticky position="top-right" :offset="[32,20]">
            <q-fab
              color="primary"
              icon="keyboard_arrow_down"
              direction="down"
            >
              <q-fab-action 
                color="primary" 
                @click="window.location.href = 'rfxPurFixPrice.html?id=' + currentId"
                icon="assignment_turned_in">
                <q-tooltip anchor="center left" self="center right" :offset="[10, 10]">定价</q-tooltip>
              </q-fab-action>
              <q-fab-action 
                color="secondary" 
                @click="window.location.href = 'rfxPurList.html'"
                icon="arrow_back">
                <q-tooltip anchor="center left" self="center right" :offset="[10, 10]">返回</q-tooltip>
              </q-fab-action>
            </q-fab>
          </q-page-sticky>
        </q-page-container>
      </q-layout>
    </div>
    
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts and utils ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <script src="../script/utils.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance2.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sor/rfxPurCompare.js"></script>

    <script>
			// quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])
      Vue.prototype.window = window
			new Vue({
        el: '#q-rfxPurCompare',
        i18n: i18n,
				data: function() {
					return {
            visible: false,
            visible2: false,
            currentId: '',
            // 各种options
            typeOptions: [
              {
                label: '前期询价',
                value: 1
              },
              {
                label: '正式报价',
                value: 2
              }
            ],
            // 基本信息
            baseInfoForm: {
              title: '',
              type: '',
              purOrgName: '',
              purGroupName: '',
              purExecutorName: ''
            },
            // 比价列表
            searchForm: {
              matCode: '',
              supplierCode: '',
              type: null
            },
            listLoading: false,
            tableData: [],
            serverPagination: {
              page: 1,
              rowsPerPage: 10,
              rowsNumber: 10
            },
            total: 0,
            selected: []
          }
				},
				computed: {
					columns: function() {
						return [
              {
                name: 'action',
                label: this.$t('操作'),
                align: 'center'
              },
              {
                name: 'rfqItemEntity.matCode',
                label: '零件编码',
                align: 'center'
              },
              {
                name: 'rfqItemEntity.matName',
                label: '零件名称',
                align: 'center'
              },
              {
                name: 'rfqItemEntity.quoteTempName',
                label: '报价模板',
                align: 'center'
              },
              {
                name: 'rfqSupplierEntity.supplierCode', 
                label: '供应商编号',
                align: 'center'
              },
              {
                name: 'rfqSupplierEntity.supplierName',
                label: '供应商名称',
                align: 'center'
              },
              {
                name: 'type', //报价类型 1:前期询价 2：正式报价
                label: '报价类型',
                align: 'center'
              },
              {
                name: 'time',
                label: '轮次',
                align: 'center',
                field: 'time',
                sortable: true
              },
              {
                name: 'status',
                label: '状态',
                align: 'center',
                field: 'status',
                sortable: true
              },
              // {
              //   name: 'productPrice', 
              //   label: '数量',
              //   align: 'center'
              // },
              {
                name: 'productPrice',
                label: '生产报价',
                align: 'center'
              },
              {
                name: 'rawMatPrice',
                label: '生产报价（原材料费）',
                align: 'center'
              },
              {
                name: 'outsourceMatPrice',
                label: '生产报价（外协外购件费）',
                align: 'center'
              },
              {
                name: 'processPrice',
                label: '生产报价（加工费）',
                align: 'center'
              },
              {
                name: 'erectionPrice',
                label: '生产报价（装配费）',
                align: 'center'
              },
              {
                name: 'nonProductPrice',
                label: '非生产报价',
                align: 'center'
              },
              // {
              //   name: 'nonProductPrice',
              //   label: '非生产报价',
              //   align: 'center'
              // },
              // {
              //   name: 'nonProductPrice',
              //   label: '非生产报价',
              //   align: 'center'
              // },
              // {
              //   name: 'nonProductPrice',
              //   label: '非生产报价',
              //   align: 'center'
              // },
              {
                name: 'totalPrice',
                label: '总价',
                align: 'center'
              },
              // {
              //   name: 'nonProductPrice',
              //   label: '小计',
              //   align: 'center'
              // },
              {
                name: 'rfqItemEntity.currencyName',
                label: '币种',
                align: 'center'
              }
						]
          },
          pages: function() {
            return Math.ceil(this.total/this.serverPagination.rowsPerPage) == 0? 1: Math.ceil(this.total/this.serverPagination.rowsPerPage)
          }
        },
        watch: {
          'serverPagination.rowsPerPage': function(rowsPerPage) {
            this.detailsListGet({ pagination: this.serverPagination })
          },
          'serverPagination.page': function(page) {
            this.detailsListGet({ pagination: this.serverPagination })
          }
        },
        created: function() {
          var args = GetRequest()
          this.currentId = args.id
          this.baseInfoGet()
          this.detailsListGet({
            pagination: this.serverPagination
          })
        },
				methods: {
					baseInfoGet: function() {
            var that = this
            this.visible = true
            axios({
              method: 'post',
              url: '/manager/rfq/main/getMainInfo/' + this.currentId,
            })
            .then(function(data) {
              that.baseInfoForm = data.data
              setTimeout(function() {
                that.visible = false
              }, 500);
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          detailsListGet: function(arg) {
            var that = this
            this.visible2 = true
            this.listLoading = true
            this.serverPagination = arg.pagination
            axios({
              method: 'post',
              url: '/manager/rfqvendor/quote/queryByHeaderId/'+ this.currentId,
              data: {
                page: this.serverPagination.page,
                rows: this.serverPagination.rowsPerPage,
                sort: this.serverPagination.sortBy,
                order: this.serverPagination.descending == true? 'desc' : (this.serverPagination.descending == false? 'asc' : null),
                'search_EQ_rfqItemEntity.matCode': this.searchForm.matCode,
                'search_EQ_rfqSupplierEntity.supplierCode': this.searchForm.supplierCode,
                search_EQ_type: this.searchForm.type
              }
            })
            .then(function(data) {
              that.tableData = data.rows
              that.total = data.total
              setTimeout(function() {
                that.visible2 = false
              }, 500);
              that.listLoading = false
              that.btnLoadingSearch = false
              that.btnLoadingReset = false
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          search: function() {
            this.btnLoadingSearch = true
            this.detailsListGet({
              pagination: this.serverPagination
            })
          },
          reset: function() {
            this.btnLoadingReset = true
            this.searchForm = {  
              matCode: '',
              supplierCode: '',
              type: null
            }
            this.detailsListGet({
              pagination: this.serverPagination
            })
          },
          lookQuote: function(rfqItemId, headerId, rfqSupplierId, quoteId) {
            window.location.href = './rfxVendorProductionQuotationView.html?rfqItemId='+ rfqItemId +'&headerId='+ headerId +'&rfqSupplierId='+ rfqSupplierId +'&quoteId='+ quoteId +'&type=1&backUrl=rfxPurCompare'
          },
          reQuote: function(id) {
            var that = this
            this.$q.dialog({
              title: '确认',
              message: '确认发起重新报价吗？',
              ok: {
                label: '确认',
                flat: true
              },
              cancel: {
                label: '取消',
                flat: true
              }
            })
            .then(function() {
              axios({
                method: 'post',
                url: '/manager/rfqvendor/quote/reQuote/'+id,
              })
              .then(function(data) {
                if (data.success) {
                  that.$q.notify({
                    message: '操作成功',
                    type: 'positive',
                    icon: 'done',
                    timeout: 1000,
                    position: 'top-right'
                  })
                } else {
                  that.$q.notify({
                    message: data.msg,
                    type: 'negative',
                    icon: 'error_outline',
                    timeout: 1000,
                    position: 'top-right'
                  })
                }
                that.detailsListGet({
                  pagination: that.serverPagination
                })
              })
              .catch(function(err) {
                console.log(err)
              })
            })
            .catch(function() {
              
            })
          }
				}
			})
    </script>
  </body>
</html>